<template>
  <div>
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <template #toolbar>
        <CollapseContainer class="mt-4">
          <a-button type="primary" @click="payInfoHandler(selectedRow)" :disabled="!hasSelectedRows"> 查看支付信息 </a-button>
          <a-button type="primary" @click="optLogHandler(selectedRow)" :disabled="!hasSelectedRows"> 查看日志 </a-button>
          <a-button type="primary" @click="handleOrderDetail(selectedRow)" :disabled="!hasSelectedRows" v-auth="'ACTION_orderDetail'"> 查看详情 </a-button>
          <a-button type="primary" @click="handleRefund(selectedRow)" :disabled="!hasSelectedRows" v-auth="'ACTION_orderApplyrefund'"> 申请退款 </a-button>
        </CollapseContainer>
      </template>
    </BasicTable>
    <OrderDrawer @register="registerDrawer" @success="handleSuccess" />
    <PayInfoModal @register="registerPayInfoModal"></PayInfoModal>
    <OrderOptLogModal @register="registerOrderOptLogModal"></OrderOptLogModal>
    <OrderDetailModal @register="registerOrderDetailModal"></OrderDetailModal>
  </div>
</template>
<script lang="ts" setup name="order">
import { BasicTable } from '@apps/antd-admin/src/components/Table';
import { useBaseTable } from '@apps/antd-admin/src/hooks';
import { Api, orderRefund } from './api';
import { useDrawer } from '@apps/antd-admin/src/components/drawer';
import OrderDrawer from './OrderDrawer.vue';
import { useModal } from '@apps/antd-admin/src/components/modal';
import PayInfoModal from './PayInfoModal.vue';
import OrderOptLogModal from '../orderoptlog/OrderOptLogModal.vue';
import OrderDetailModal from './OrderDetailModal.vue';
import { columns, searchFormSchema } from './data';
import { useMessage } from '@apps/antd-admin/src/hooks/web/useMessage';

const { createMessage, createConfirm } = useMessage();
const [registerDrawer, { openDrawer }] = useDrawer();
const { prefixCls, tableContext } = useBaseTable({
  tableProps: {
    title: '列表',
    listUrl: Api.page,
    //列表查询handler
    handlerName: 'busOrderListHandler',
    delUrl: Api.remove,
    columns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    showIndexColumn: true,
    clickToRowSelect: true,
    showActionColumn: false,
    rowKey: 'orderId',
    actionColumn: {
      width: 80,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: 'right',
    },
    rowSelection: {
      type: 'radio',
    },
  },
});

//注册table数据
const [registerTable, { reload, setProps }, { rowSelection, selectedRow, hasSelectedRows }] = tableContext;
const [registerPayInfoModal, { openModal: openPayInfoModal }] = useModal();
const [registerOrderOptLogModal, { openModal: openOrderOptLogModal }] = useModal();
const [registerOrderDetailModal, { openModal: openOrderDetailModal }] = useModal();

function handleCreate() {
  openDrawer(true, {
    isUpdate: false,
  });
}

function payInfoHandler(record) {
  openPayInfoModal(true, {
    record,
    isUpdate: false,
  });
}

function orderSubmitHandler() {
  openDrawer(true, {
    isUpdate: false,
  });
}

function optLogHandler(record) {
  let data = { orderId: record.orderId };
  openOrderOptLogModal(true, {
    data,
    isUpdate: false,
  });
}

function handleOrderDetail(record) {
  openOrderDetailModal(true, {
    record,
    isUpdate: false,
  });
}

function handleRefund(record) {
  createConfirm({
    iconType: 'info',
    title: '申请退款',
    content: '此订单是否申请退款？',
    onOk: async () => {
      await orderRefund({ orderId: record.orderId });
      reload();
    },
    onCancel: async () => {},
  });
}

function handleEdit(record: Recordable) {
  openDrawer(true, {
    record,
    isUpdate: true,
  });
}

function handleSuccess() {
  reload();
}

function setSearchInfoProps(userId) {
  console.info('userId', userId);
  setProps({ searchInfo: { userId: userId } });
}

defineExpose({
  setSearchInfoProps,
});
</script>
